<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sa="http://www.thymeleaf.org/extras/sa-token">

<head th:fragment="head">
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
    <link href="//cdn.staticfile.org/layui/2.9.7/css/layui.css" rel="stylesheet">
    <script src="//cdn.staticfile.org/layui/2.9.7/layui.js"></script>
    <style>
        /* 使右侧导航项靠右 */
        .layui-nav-right {
            float: right;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <ul class="layui-nav" th:fragment="nav">
        <li class="layui-nav-item"><a href="/" style="font-size: larger;">XXX 系统</a></li>
        <li class="layui-nav-item"><a href="/index">菜单1</a></li>
        <li class="layui-nav-item"><a >菜单2</a></li>
        <!-- 右侧导航项 -->
        <li class="layui-nav-item layui-nav-right" id="loginBtn" sa:notLogin><a href="/login" >登录</a></li>
        <li class="layui-nav-item layui-nav-right" id="logoutBtn" sa:login><a href="/logout">退出</a></li>
        <li class="layui-nav-item layui-nav-right" >
            <img src="http://cdn.qiniu.liyansheng.top/img/avatar.png" class="layui-nav-img">
        </li>
    </ul>

    <div>
        <div style="text-align: center;background-color: #4191C2;color: white;height: 150px;">
            <h1 style="padding: 50px">XXXX</h1>
        </div>
    </div>

</body>

</html>